<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue增删改查</title>
    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 引入组件库 -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="../vue.js"></script>
</head>

<body>
    <div class="container" id="app">
        <div class="header">
            <input type="text" placeholder="Search" class="search" v-on:input="oninput">
            <div v-for="item in searchlist"></div>
            <input type="button" @click="AddClick" value="新增" class="add" />
        </div>
        <div class="addBody" v-show="isAdd">
            <div class="addContent">
                <h2>新增&nbsp;&nbsp;|&nbsp;&nbsp;修改</h2>
                <table>
                    <tr>
                        <td>用户名</td>
                        <td><input type="text" class="text" v-model="username"></td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input type="text" class="text" v-model="email"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>
                            <input type="radio" name="sex" id="male" value="男" v-model="sex" />
                            <label for="male">男</label>
                            <input type="radio" name="sex" id="female" value="女" v-model="sex">
                            <label for="female">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td>省份</td>
                        <td>
                            <select v-model="province">
                                <option value="广东省">广东省</option>
                                <option value="辽宁省">辽宁省</option>
                                <option value="江西省">江西省</option>
                                <option value="广西省">广西省</option>
                                <option value="重庆市">重庆市</option>
                                <option value="北京市">北京市</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好</td>
                        <td>
                            <input type="checkbox" id="ball" value="篮球" v-model="hobby" />
                            <label for="ball">篮球</label>
                            <input type="checkbox" id="pic" value="插画" v-model="hobby" />
                            <label for="pic">插画</label>
                            <input type="checkbox" id="program" value="编程" v-model="hobby" />
                            <label for="program">编程</label>
                            <input type="checkbox" id="ready" value="读书" v-model="hobby" />
                            <label for="ready">读书</label>
                            <input type="checkbox" id="piano" value="弹琴" v-model="hobby" />
                            <label for="piano">弹琴</label>
                        </td>
                    </tr>
                    <tr style="height: 50px;" class="addsOprate">
                        <td colspan="2">
                            <input type="button" value="取消" @click="isAdd = false">
                            <input type="button" value="确定" @click="ConfirmClick">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="main">
            <table>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>省份</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in list">
                    <td>{{index+1}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.province}}</td>
                    <td>{{item.hobby.join(' | ')}}</td>
                    <td><a href="#" @click="modifyClick(index)">修改</a><a href="#" @click="deleteClick(index)">删除</a></td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isAdd: false,
            username: '',
            email: '',
            sex: '',
            province: '广东省',
            hobby: [],
            addList: {},
            searchlist: [],
            titleChange: false,
            userId: '',
            list: [{
                username: '123',
                email: '123456@163.com',
                sex: '男',
                province: '广东省',
                hobby: ['运动']
            }, {
                username: 'aaaaa',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            }, {
                username: 'bbbbb',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            }, {
                username: 'aaabb',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }, {
                username: 'cccccc',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            }, {
                username: 'dddddd',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            }, {
                username: 'eeeee',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }],
            lists: [{
                username: '123',
                email: '123456@163.com',
                sex: '男',
                province: '广东省',
                hobby: ['运动']
            }, {
                username: 'aaaaa',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            }, {
                username: 'bbbbb',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            }, {
                username: 'aaabb',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }, {
                username: 'cccccc',
                email: '123@qq.com',
                sex: '男',
                province: '北京市',
                hobby: ['篮球', '读书', '编程']
            }, {
                username: 'dddddd',
                email: 'bbbbbbb@163.com',
                sex: '女',
                province: '河北省',
                hobby: ['弹琴', '读书', '插画']
            }, {
                username: 'eeeee',
                email: 'abababab@qq.com',
                sex: '女',
                province: '重庆市',
                hobby: ['篮球']
            }]
        },
        methods: {
            AddClick() {
                this.isAdd = true;
                this.titleChange = false;
                this.username = '';
                this.email = '';
                this.sex = '';
                this.province = '广东省';
                this.hobby = [];
            },
            oninput(e) {
                console.log(e.data);
                if (e.data != null) {
                    this.list = this.list.filter((item) => {
                        return item.username.toUpperCase().includes(e.data)
                    })
                } else {
                    // 还原数组
                    this.list = this.lists
                }
            },
            ConfirmClick() {
                this.isAdd = false;
                if (this.titleChange == false) {
                    this.addList = {
                        username: this.username,
                        email: this.email,
                        sex: this.sex,
                        province: this.province,
                        hobby: this.hobby
                    }
                    this.list.push(this.addList);
                } else {
                    this.list.forEach((item, i) => {
                        if (this.userId == i) {
                            item.username = '';
                            item.email = '';
                            item.sex = '';
                            item.hobby = [];
                            item.province = '';
                            item.username = this.username;
                            item.email = this.email;
                            item.sex = this.sex;
                            item.province = this.province;
                            item.hobby = this.hobby;
                        }
                    })
                }
            },
            deleteClick(index) {
                this.list.splice(index, 1);
            },
            modifyClick(index) {
                this.isAdd = true
                this.titleChange = true;
                this.list.forEach((item, i) => {
                    if (i == index) {
                        this.username = item.username;
                        this.email = item.email;
                        this.sex = item.sex;
                        this.province = item.province;
                        this.hobby = item.hobby;
                        this.userId = i;
                    }
                })
            }
        }
    })
</script>
<style>
    table {
        border: 1px solid #ccc;
        padding: 0;
        border-collapse: collapse;
        table-layout: fixed;
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }
    
    table td,
    table th {
        height: 30px;
        border: 1px solid #ccc;
        background: #fff;
        font-size: 15px;
        padding: 3px 3px 3px 8px;
    }
    
    table th:first-child {
        width: 30px;
    }
    
    .header .search {
        width: 300px;
        height: 24px;
        line-height: 24px;
        border-radius: 4px;
    }
    
    a,
    .add {
        text-decoration: none;
        display: inline-block;
        width: 50px;
        text-align: center;
        height: 24px;
        line-height: 24px;
        border: 1px solid rgb(12, 202, 145);
        border-radius: 4px;
        color: #fff;
        background-color: rgb(12, 202, 145);
        margin-right: 10px;
    }
    
    .header .add {
        position: absolute;
        right: 20px;
        top: 12px;
    }
    
    .main a:last-child {
        border: 1px solid rgb(175, 36, 12);
        background-color: rgb(175, 36, 12);
    }
    
    .addBody {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(71, 71, 71, 0.7);
    }
    
    .addContent {
        width: 430px;
        margin: 0 auto;
        background-color: rgb(60, 223, 195);
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -200px;
    }
    
    .addContent h2 {
        font-size: 1.3em;
        margin: 0;
        padding-top: 10px;
        margin-bottom: 0px;
        color: #fff;
        padding-left: 10px;
    }
    
    .addContent .text {
        width: 80%;
        height: 20px;
    }
    
    .addContent tr td:first-child {
        width: 20%;
    }
    
    .addsOprate input {
        background: rgb(60, 223, 195);
        border: none;
        border-radius: 2px;
        color: #fff;
        display: inline-block;
        width: 60px;
        height: 28px;
        line-height: 28px;
        margin: 0 20px;
        box-sizing: border-box;
    }
</style>

</html>